<template>
    <div class="page-loadmore">
        <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
            <!--<ul class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">-->
            <!--<li v-for="item in list" class="page-infinite-listitem">{{ item }}</li>-->
            <!--</ul>-->
              <!--<div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">-->
            <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded"  ref="loadmore">
                <div class="card facebook-card" style="margin: 0" v-for="(item,index) in list">
                    <div class="card-header no-border">
                        <div class="facebook-avatar">
                            <img class="head_img" :src="item.userHeadImg" alt=""width="34" height="34"/>
                        </div>
                        <div class="facebook-name text-left">{{item.userName}}</div>
                        <div class="facebook-date text-left">{{item.created_at}}</div>
                    </div>
                    <div class="card-content">
                        <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
                               poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509627611339&di=89e2846826718c7a2f2f5d3707cf2dc4&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4d086e061d950a7be91b560503d162d9f3d3c9c1.jpg" data-setup="{}">
                            <source :src="'http://demo.mqphp.com'+item.path" type="video/mp4">
                            <!--<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">-->
                            <!--<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">-->
                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a web browser that
                                <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                            </p>
                        </video>
                        <!--<img :src="item.userHeadImg" alt="" width="100%"/>-->
                    </div>
                    <div class="card-footer no-border" style="text-align: left;background: #fff">
                        <span style="font-size: 0.8rem">{{ item.content }}</span>
                        <div class="card-footer no-border no-padding-top" style="background: #fff">

                                <div class="text-center" style="margin-right: 1rem;">
                                    <a href="javascript:;" @click="like($event,item.id,index)">
                                    <i id="like" class="icon iconfont icon-xihuan1" style="font-size: 1.5rem;margin-bottom: -0.5rem"></i>
                                    </a>
                                    <span style="display: block">{{item.likeCount}}</span>
                                </div>


                            <a :href="'/#/comment/'+item.id">
                                <div class="text-center">
                                    <i class="font-1rem icon iconfont icon-xiaoxi" style="font-size: 1.5rem;margin-bottom: -0.5rem"></i>
                                    <span style="display: block">
                                    {{item.comment_count}}
                                </span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!--</div>-->
                <div slot="top" class="mint-loadmore-top">
                    <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
                    <span v-show="topStatus === 'loading'">加载中....</span>
                </div>
                <div slot="bottom" class="mint-loadmore-bottom">
                    <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">↑</span>
                    <span v-show="bottomStatus === 'loading'">加载中....</span>
                </div>
                <p v-show="loading" class="page-infinite-loading">
                    <mt-spinner type="fading-circle"></mt-spinner>
                    加载中...
                </p>
            </mt-loadmore>
        </div>
    </div>

</template>
<script>
    /* eslint-disable no-unused-vars,quotes,no-trailing-spaces,spaced-comment,semi */
    import {DatetimePicker, Button, Toast, Loadmore, InfiniteScroll, Header} from 'mint-ui'
    export default {
      data () {
        return {
          topStatus: '',
          list: [],
          loading: false,
          allLoaded: false,
          wrapperHeight: 0,
          bottomStatus: '',
          page: 0,
          page_cout: 1
        };
      },
      methods: {
        handleBottomChange(status) {
          this.bottomStatus = status;
        },
        handleTopChange(status) {
          this.topStatus = status;
        },
        loadTop(){
          console.log('下拉方法执行了....');
          setTimeout(() => {
              this.getList(1);
              console.log('刷新成功！....');
              this.$refs.loadmore.onTopLoaded();
          }, 1000);
        },
        loadBottom() {
          this.loading = true;
          this.page = this.page + 1;
          if (this.hasNextPage()){
            setTimeout(() => {
              this.getList(this.page);
              console.log('刷新成功！....');
              this.loading = false;
              this.$refs.loadmore.onBottomLoaded();
            }, 1500);
          }else{
            this.$refs.loadmore.onBottomLoaded();
            this.allLoaded = true
            console.log('加载完毕！....');
          }
        },
        hasNextPage: function () {
            if (this.page > this.page_count){
              return false
            }else {
              return true
            }
        },
        getList (page) {
          this.$http.get("http://vue.mqphp.com/admin/api/getJson?page="+page,{
          }).then(function(res){
            this.list = this.list.concat(res.body.data); // 数据追加
            this.page_count = res.body.page_count
//              this.list = res.data.data;
          },function(err){
            console.log(err);
          })
        },

        /**
        * 点赞
        */
        like (event,id,index) {
            this.$http.get("http://vue.mqphp.com/admin/api/like?video_id="+id,{
            }).then(function(res){
                if (!res.body.status){
                    Toast("已经点过赞了，不能再点");
                }else {
                    Toast("点赞成功");
                    this.list[index].likeCount += 1;
                }

                $(event.target).removeClass("icon-xihuan1");
                $(event.target).addClass("icon-xihuan");
                $(event.target).css('color','red');
            },function(err){
                console.log(err);
            })
        },
      },
//      created() {
//        this.loading = true;
//        setTimeout(() => {
//          this.getList(this.page);
//          this.loading = false;
//        }, 1000);
//      },
      mounted () {
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
      }
    };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="css" scoped>
    @import "../../static/user-center.css";
    @import "../../static/font/iconfont.css";
</style>
